<template>
	<el-form>
		<div class="table-header table-row">
			<div class="table-item-col" v-for="(item, index) in tableData[0] ? Object.keys(tableData[0]).length / 2 : 0" :key="index">
				<span>
					{{ tableData[0]['key' + (index + 1)] }}
				</span>
			</div>

			<div class="table-item-col">
				{{ $t('Prod.amount') }}
			</div>
			<div class="table-item-col">
				{{ $t('Prod.actualInventory') }}
			</div>
			<div class="table-item-col">
				{{ $t('Prod.buyMinLimit') }}
			</div>
			<!-- <div class="table-item-col">
                基础销量
            </div> -->
			<div class="table-item-col">
				{{ $t('Prod.picture') }}
			</div>
		</div>

		<div v-for="(item, index) in tableData" :key="index" class="table-row">
			<div class="table-item-col" v-for="(citem, cindex) in Object.keys(tableData[0]).length / 2" :key="cindex">
				{{ item['value' + citem] }}
			</div>

			<div class="table-item-col">
				<el-input-number :precision="2" :step="0.1" :min="0" v-model="tableDataForm[index].amount" :max="99999" />
			</div>
			<div class="table-item-col">
				<el-input-number :min="1" class="price-input" v-model="tableDataForm[index].actualStocks" :max="99999" />
			</div>
			<div class="table-item-col">
				<el-input-number v-model="tableDataForm[index].buyMinLimit" :min="1" :max="99999" />
			</div>
			<!-- <div class="table-item-col">
                <el-input-number v-model="item.actualStocks" :min="0" :max="99999" />
            </div> -->
			<div class="table-item-col">
				<upload-img v-model:image-url="tableDataForm[index].pic"></upload-img>
			</div>
		</div>

		<div v-if="isCustomizable">
			<div class="table-header table-row" style="margin-top: 20px">
				<div class="table-item-col">
					<span>
						{{ $t('Prod.customName') }}
					</span>
				</div>

				<div class="table-item-col">
					{{ $t('Prod.amount') }}
				</div>
				<div class="table-item-col">
					{{ $t('Prod.actualInventory') }}
				</div>
				<div class="table-item-col">
					{{ $t('Prod.buyMinLimit') }}
				</div>
				<!-- <div class="table-item-col">
                基础销量
            </div> -->
				<div class="table-item-col">
					{{ $t('Prod.picture') }}
				</div>
			</div>

			<div class="table-row">
				<div class="table-item-col">
					<popover-input @confirm="onConfirm">
						<template #default>
						    {{ customData.skuName }}
						</template>
					</popover-input>
				</div>

				<div class="table-item-col">
					<el-input-number :precision="2" :step="0.1" :min="0" v-model="customData.amount" :max="99999" />
				</div>
				<div class="table-item-col">
					<el-input-number :min="1" class="price-input" v-model="customData.actualStocks" :max="99999" />
				</div>
				<div class="table-item-col">
					<el-input-number v-model="customData.buyMinLimit" :min="1" :max="99999" />
				</div>
				<!-- <div class="table-item-col">
                <el-input-number v-model="item.actualStocks" :min="0" :max="99999" />
            </div> -->
				<div class="table-item-col">
					<upload-img v-model:image-url="customData.pic"></upload-img>
				</div>
			</div>
		</div>
	</el-form>
</template>
<script lang="ts" setup>
const PopoverInput = defineAsyncComponent(() => import('/@/components/PopoverInput/index.vue'));
defineProps(['tableData', 'isCustomizable']);
const customData = ref<TableDataFormItem>({
	amount: 0,
	actualStocks: 1,
	buyMinLimit: 1,
	pic: 'https://oss.king-of-panda.com/biz/custom.png',
	skuName: 'Custom',
});
interface TableDataFormItem {
	amount: string | number;
	actualStocks?: string | number;
	buyMinLimit?: string | number;
	buyMaxLimit?: string | number;
	pic?: string;
	originAmount?: string;
	skuName?: string;
}
const onConfirm = (val: string) => {
	customData.value.skuName = val;
};

const tableDataForm = ref<TableDataFormItem[]>([]);

defineExpose({
	tableDataForm,
	customData,
});
</script>
<style lang="scss" scoped>
.table-header {
	margin-top: 20px;
}

.table-row {
	display: flex;
	border-top: 1px #f8f8f8 solid;
	border-left: 1px #f8f8f8 solid;

	&:nth-child(2n - 1) {
		background-color: #f8f8f8;
	}

	.table-item-col {
		border-right: 1px #f8f8f8 solid;
		min-height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	&:last-child {
		border-bottom: 1px #f8f8f8 solid;
	}

	.table-img {
		width: 80px;
		height: 60px;
	}

	:deep(.upload-box) {
		width: 80px;
		height: 80px;

		.el-upload {
			width: 80px;
			height: 80px;
		}
	}
}

.price-input {
	min-width: 60%;
	max-width: 90%;
}

:deep(.el-input-number) {
	width: 80%;
}
</style>
